<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<link rel="stylesheet" type="text/css" href="css/public.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/unslider.min.js" type="text/javascript" charset="utf-8"></script>

		<style>
			.banner {
				position: relative;
				overflow: auto;
				text-align: center;
			}

			.banner li {
				list-style: none;
			}

			.banner ul li {
				float: left;
			}

			#b06 {
				width: 640px;
			}

			#b06 .dots {
				position: absolute;
				left: 0;
				right: 0;
				bottom: 20px;
			}

			#b06 .dots li {

				display: inline-block;

				width: 10px;

				height: 10px;

				margin: 0 4px;

				text-indent: -999em;

				border: 2px solid #fff;

				border-radius: 6px;

				cursor: pointer;

				opacity: .4;

				-webkit-transition: background .5s, opacity .5s;

				-moz-transition: background .5s, opacity .5s;

				transition: background .5s, opacity .5s;

			}

			#b06 .dots li.active {

				background: #fff;

				opacity: 1;

			}

			#b06 .arrow {
				position: absolute;
				top: 200px;
			}

			#b06 #al {
				left: 15px;
			}

			#b06 #ar {
				right: 15px;
			}
		</style>

	</head>
	<body>
		<!--
			页面的版心宽度  1251px
		-->
		<div id="box">
			<!--头部-->
			<div class="xf_header">
				<!-- <header>
					<a href="index.html">
						<img src="img/logo_big01.png" />
					</a>
					<div class="city">
						<img src="img/icon-address.png" />
						<span>武汉市</span>
						<a href="#">切换城市</a>
					</div>
					<div class="nav">
						<a href="#">全部</a>
						<a href="list.html">蛋糕</a>
						<a href="#">下午茶</a>
						<a href="#">手信</a>
						<a href="#">团购预约</a>
						<a href="about.html">关于我们</a>
					</div>
					<div class="link">
						<div class="love"></div>
						<a href="#"> <img src="img/i-search.jpg" /></a>
						<a href="#"><img src="img/i-cart.jpg" /></a>
						<a href="login.html"><img src="img/i-user.jpg" /></a>
						<a href="#">联系我们</a>
					</div>
				</header> -->

			</div>
			<!--头部 end-->

			<!--广告 -->
			<div class="banner" id="b06">
				<ul>
					<li><img src="img/bg.jpg" width="100%" height="680"></li>
					<li><img src="img/bg1.jpg" width="100%" height="680"></li>
					<li><img src="img/bg2.jpg" width="100%" height="680"></li>
					<li><img src="img/bg3.jpg" width="100%" height="680"></li>
				</ul>
				<a href="javascript:void(0);" class="unslider-arrow06 prev">
					<img class="arrow" id="al" src="img/arrowl.png" alt="prev" width="20" height="35">
				</a>
				<a href="javascript:void(0);" class="unslider-arrow06 next">
					<img class="arrow" id="ar" src="img/arrowr.png" alt="next" width="20" height="37">
				</a> 
			</div>
			<!--广告 end-->

			<!-- 商品分类 -->
			<div class="cake_type">
				<div>
					<a>
						<img src="img/cake_03.jpg" />
					</a>
					<a>
						<span>AFTERNOON TEA </span>
						<span>下午茶</span>
					</a>
					<p>“一杯咖啡，一份甜点，一抹偷不走的时光”</p>
				</div>
				<div>
					<a href="list.html">
						<img src="img/cake_05.jpg" />
					</a>
					<a href="list.html">
						<span>CAKE </span>
						<span>蛋糕</span>
					</a>
					<p>“只有国王才有资格拥有的，享受众人给予的祝福”</p>
				</div>
				<div>
					<a>
						<img src="img/cake_07.jpg" />
					</a>
					<a>
						<span>SOUVENIR </span>
						<span>手信</span>
					</a>
					<p>“不在于贵，一情意，一真诚”</p>
				</div>
			</div>
			<!-- 商品分类 end -->

			<!--底部 -->
			<div class="xf_footer">
				<!-- <footer>
					<div class="footer1">
						<div class="msg">
							<a href="#">品牌动态</a>
							<a href="#">生产经营资质</a>
							<a href="#">企业合作</a>
							<a href="#">发票申请</a>
							<a href="#">平台规则</a>
							<a href="#">帮助服务</a>
							<a href="#">联系我们</a>
						</div>
						<div class="tel">
							<a href="#">
								<img src="img/tel_03.jpg" />
								<span>400-999-6665</span>
							</a>
							<a href="#">WEIBO</a>
							<a href="#">WECHAT</a>
							<a href="#">京东商城</a>
						</div>
					</div>
					<div class="footer2">
						<div class="copyright">
							<span>深圳市悦轩商城科技股份有限公司</span>
							<span>粤ICP备16039394号-6 </span>
							<span>京公网安备44030702002399</span>
							<span>公司地址：深圳市龙岗区坂田街道布龙339鸿生源工业园A座5楼</span>
						</div>
					</div>
				</footer> -->
			</div>
			<!--底部 end-->
		</div>
	</body>
	
	
	<script type="text/javascript">
		$.get("header.html",function(data,status){
			$(".xf_header").html(data)
		});
		$.get("footer.html",function(data,status){
			$(".xf_footer").html(data)
		});
	</script>
	
	<!-- 飞来飞去 -->
	<script type="text/javascript">
		$(document).ready(function(e) {
			$(".cake_type>div img").eq(0).css({
				'left':"-330px"
			});
			$(".cake_type>div img").eq(1).css({
				'bottom':"-330px"
			});
			$(".cake_type>div img").eq(2).css({
				'right':"-330px"
			});
			$(window).scroll(function(){
				var top = $(this).scrollTop();
				if(top>=200){
					hd(top)
				}
			})
			function hd(top){
				let cha = top - 480
				if(cha>=0){
					cha = 0
				}
				$(".cake_type>div img").eq(0).css({
					'left': cha + "px"
				});
				$(".cake_type>div img").eq(1).css({
					'bottom': cha + "px"
				});
				$(".cake_type>div img").eq(2).css({
					'right': cha + "px"
				});
			}
		})
	</script>
	
	<!-- 轮播图 -->
	<script>
		function imgReload() {
			var imgHeight = 0;
			var wtmp = $("body").width();
			$("#b06 ul li").each(function() {
				$(this).css({
					width: wtmp + "px"
				});
			});
			$(".sliderimg").each(function() {
				$(this).css({
					width: wtmp + "px"
				});
				imgHeight = $(this).height();
			});
		}

		$(window).resize(function() {
			imgReload();
		});

		$(document).ready(function(e) {
			imgReload();
			var unslider06 = $('#b06').unslider({
					dots: true,
					fluid: true
				}),
				data06 = unslider06.data('unslider');

			$('.unslider-arrow06').click(function() {
				var fn = this.className.split(' ')[1];
				data06[fn]();
			});
		});
	</script>

	<!-- 鼠标悬停效果 -->
	<script type="text/javascript">
		$(".cake_type>div").hover(function() {
			$(this).css("opacity", "0.3");
		}, function() {
			$(this).css("opacity", "1");
		});
	</script>
</html>
